<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>涟漪效果按钮</title>
		<link rel="stylesheet" type="text/css" href="css/index.css"/>
	</head>
	<body> 
		<a href="#">零基础学前端</a>
		<a href="#">就来半圆教育</a>
	</body>
	<script type="text/javascript">
		const btns = document.querySelectorAll("a");
		btns.forEach(btn=>{
			btn.addEventListener('click',function(e){
				let x = e.clientX - e.target.offsetLeft;
				let y = e.clientY - e.target.offsetTop;
				let span = document.createElement('span');
				span.style.left = x + 'px';
				span.style.top = y + 'px';
				this.appendChild(span);
				setTimeout(()=>{
					span.remove();
				},1000)
			})
		})
	</script>
</html>
